<template>
    <div class="alert-container">
      <el-alert
        v-for="(alert, index) in alerts"
        :key="index"
        :title="alert.message"
        :type="alert.type"
        show-icon
        @close="removeAlert(index)"
      />
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        alerts: []
      };
    },
    methods: {
      addAlert(alert) {
        this.alerts.push(alert);
        setTimeout(() => {
          this.removeAlert(this.alerts.indexOf(alert));
        }, 3000); // 3秒后自动隐藏
      },
      removeAlert(index) {
        this.alerts.splice(index, 1);
      }
    }
  };
  </script>
  
  <style scoped>
  .alert-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 600px;
  }
  .el-alert {
    margin-bottom: 10px;
  }
  </style>